<template>
  <b-card no-body footer-class="bg-transparent p-1 border-0" header-class="p-1">
    <template #header>
      <b-input-group :prepend="label" class="border-0" size="sm">
        <b-form-tags placeholder="输入规格信息" v-model="keys"></b-form-tags>
        <b-input-group-append>
          <b-button variant="danger">清除</b-button>
        </b-input-group-append>
      </b-input-group>
    </template>
    <template #footer>
      <b-input-group
        size="sm"
        :prepend="tag.key"
        class="border-0"
        v-for="(tag, index) in tags"
        :key="index"
      >
        <b-form-tags
          v-model="tag.items"
          placeholder="输入规格信息"
        ></b-form-tags>
        <b-input-group-append>
          <b-button variant="danger">清除</b-button>
        </b-input-group-append>
      </b-input-group>
    </template>
  </b-card>
</template>


<script>
export default {
  data() {
    return {
      keys: [],
    };
  },
  methods: {},
  model: {
    prop: "tags",
    event: "change",
  },
  watch: {
    keys: function (val, old) {
      if (val.length < old.length) {
        this.tags.forEach(({ key }, index) => {
          if (!val.includes(key)) {
            this.tags.pop(index);
          }
        });
      } else {
        this.tags.push({
          key: val[val.length - 1],
          items: [],
        });
      }
    },
    tags: function (val, old) {
      console.log(val);
      console.log(old);
    },
  },
  created() {
    this.tags.forEach((item) => {
      this.keys.push(item.key);
    });
  },
  props: {
    tags: Array,
    label: String,
  },
};
</script>


<style lang="scss" scoped></style>
